<template>
  <div class="box">
    <div class="left">
      <ul>
        <li v-for="(item,ind) in classify.classifyList" 
        v-bind:key = 'item.id' 
        :class = "{'active': index == ind}" 
        @click="click(ind)"
            ><a :href="`#classify/classify${ind}`">{{item.cate_name}}</a>
        </li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li v-for="(item,ind) in classify.classifyList" v-bind:key = 'item.id' :id="`classify/classify${ind}`">
          <div class="title">——— {{item.cate_name}} ———</div>
          <div class="content" >
                <div class = "c_item" v-for="i in item.children" v-bind:key="i.id" >
                    <router-link :to="{path : '/classifysearch',query : {id:i.id,name : i.cate_name}}">
                          <div class="img"><img :src="i.pic" alt="" /></div>
                          <div>{{i.cate_name}}</div>
                    </router-link>
                </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
.box {
    width: 100%;
    overflow: hidden;
    display: flex;
    .left{
        flex-basis: 25%;
        ul{
            position: fixed;
            width: 25%;
            left: 0;
            li{
                text-align: center;
                height: 50px;
                line-height: 50px;
                font-size : 16px;
            }
            .active{
                background-color: white;
                border-left: 3px solid #fd5e53;
                box-sizing: border-box;
                font-weight: bold;
                a{
                    color : #fd5e53;
                }
            }
        }
    }
    .right{
        flex-basis: 75%;
        background-color: white;
        ul{
            width: 100%;
            li{
                width: 100%;
                padding: 50px 20px 20px;
                box-sizing: border-box;
                .title{
                    text-align: center;
                    margin-bottom: 25px;
                    font-size: 16px;
                }
                .content{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    .c_item{
                        flex-basis: 33%;
                        font-size: 14px;
                        text-align: center;
                        .img{
                            height: 90px;
                            img{
                                width: 90%;
                            }
                        }
                        
                    }
                }
            }
        }
    }
}
</style>
<script>
import { mapState } from "vuex"
export default {
    data(){
        return{
            index : 0,
        }
    },
    methods:{
        click(i){
            this.index = i;
        }
    },
  computed:{
     ...mapState(['classify'])
  },
};
</script>